<template>
  <div class="app-container">
    <el-input v-model="search.keyword" placeholder="keywords" style="width:300px" />
    <el-button type="primary" @click="getList">Search</el-button>
    <el-button type="primary" @click="handleAddUser">Add</el-button>

    <el-table :data="userList" style="width: 100%;margin-top:30px;" border empty-text="Can't find record in table">
      <el-table-column align="center" label="ID" width="70">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column align="center" label="Name" width="160">
        <template slot-scope="scope">
          <span class="link-type" @click="handleEditUser(scope)">
            {{ scope.row.contact_name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="Contact No." width="150">
        <template slot-scope="scope">{{ scope.row.contact_tel }}</template>
      </el-table-column>
      <!-- <el-table-column align="header-center" label="Email" width="200">
        <template slot-scope="scope">{{ scope.row.user_email }}</template>
      </el-table-column> -->
      <el-table-column align="header-center" label="Clients">
        <template slot-scope="scope">{{ scope.row.hotel_names }}</template>
      </el-table-column>
      <el-table-column align="header-center" label="Role" width="200">
        <template slot-scope="scope">{{ scope.row.role_name }}</template>
      </el-table-column>
      <el-table-column align="header-center" label="Login" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.user_status=='1'">Valid</span>
          <span v-if="scope.row.user_status=='0'">Invalid</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="Action" width="80">
        <template slot-scope="scope">
          <el-col :span="12">
            <el-link style="font-size:18px;" class="el-icon-edit icon-class" @click="handleEditUser(scope)" />
          </el-col>
          <el-col :span="12">
            <el-link style="font-size:18px;" class="el-icon-delete icon-class" @click="handleDeleteUser(scope)" />
          </el-col>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="search.page"
      :page-size="search.pagesize"
      style="margin-top:10px; float:right"
      @current-change="getPageList"
    />

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit User':'New User'">
      <el-form :model="userInfo" label-width="120px" label-position="left">
        <el-form-item label="Full Name">
          <el-input v-model="userInfo.contact_name" placeholder="Name" />
        </el-form-item>
        <el-form-item label="Contact No.">
          <el-input v-model="userInfo.contact_tel" placeholder="Contact" />
        </el-form-item>
        <el-form-item label="Email" prop="email">
          <el-input v-model="userInfo.user_email" placeholder="Email" />
        </el-form-item>
        <el-form-item label="Role">
          <el-select v-model="userInfo.role_id" placeholder="Please Choose" no-data-text="Can't find record">
            <el-option
              v-for="item in GroupOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Clients">
          <el-select v-model="userInfo.hotel_ids" multiple style="width:100%" placeholder="Please Choose" no-data-text="Can't find record">
            <el-option
              v-for="item in hotelOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Type">
          <el-checkbox-group v-model="userInfo.wi_types">
            <el-checkbox v-for="type in checkList" :key="type.value" :label="type.value.toString()">{{ type.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Login">
          <el-select v-model="userInfo.user_status" placeholder="Please Choose" no-data-text="Can't find record">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="userInfo.user_status === 1" label="Login Name">
          <el-input v-model="userInfo.user_login" :readonly="isReadOnly" placeholder="Login Name" />
        </el-form-item>
        <el-form-item v-if="userInfo.user_status === 1" label="Password">
          <el-input v-model="userInfo.user_pass" placeholder="Password" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">Cancel</el-button>
        <el-button type="primary" @click="confirmUser">Confirm</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { baseAPI } from '@/utils/request'
import { getUserList, getUserInfo, saveUserinfo, getDictionary } from '@/api/user'

const DefaultUserInfo = {
  id: 0,
  user_login: '',
  contact_name: '',
  contact_tel: '',
  wi_types: [],
  update_time: '',
  create_time: '',
  user_status: '',
  role_id: '',
  hotel_ids: [],
  wi_type_names: [],
  user_pass: '',
  user_email: ''
}
export default {
  data() {
    return {
      userList: [],
      userInfo: {
        id: '',
        user_login: '',
        contact_name: '',
        contact_tel: '',
        wi_types: [],
        update_time: '',
        create_time: '',
        user_status: '',
        role_id: '',
        hotel_ids: [],
        user_pass: '',
        user_email: ''
      },
      search: {
        keyword: '',
        page: 1
      },
      total: 10,
      pagesize: 1,
      dialogVisible: false,
      dialogType: 'new',
      checkList: [],
      options: [
        {
          value: 1,
          label: 'Y'
        },
        {
          value: 0,
          label: 'N'
        }
      ],
      isReadOnly: false,
      LoginSelectValue: 'Y',
      GroupOptions: [],
      GroupSelectValue: '',
      hotelOptions: [],
      HotelSelectValue: []
    }
  },
  computed: {},
  created() {
    this.getList()
    this.GetRoleCheckbox()
    this.GetHotelCheckbox()
    this.getCheckList()
  },
  methods: {
    async GetRoleCheckbox() {
      this.GroupOptions = await baseAPI.get('user/dictionary/query?dict_type=role')
    },
    async GetHotelCheckbox() {
      this.hotelOptions = await baseAPI.get('user/dictionary/query?dict_type=hotel')
    },
    async getCheckList() {
      await getDictionary({ dict_type: 'wi_type' }).then(result => {
        this.checkList = result
        console.log(this.checkList)
      })
    },
    async getList() {
      const res = await getUserList(this.search)
      this.userList = res.data
      this.total = res.total
      this.currentpage = res.current_page
      this.pagesize = res.per_page
    },
    async getPageList(value) {
      this.search.page = value
      const res = await getUserList(this.search)
      this.userList = res.data
      this.total = res.total
      this.currentpage = res.current_page
      this.pagesize = res.per_page
      this.pagesize = 1
    },
    handleAddUser() {
      this.userInfo = Object.assign({}, DefaultUserInfo)
      if (this.$refs.tree) {
        this.$refs.tree.setCheckedNodes([])
      }
      this.isReadOnly = false
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    async handleEditUser(user) {
      this.isReadOnly = true
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.userInfo = await getUserInfo(user.row.id)
    },
    async confirmUser() {
      await saveUserinfo(this.userInfo)
      this.dialogVisible = false
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: `
            <div>Success</div>
          `,
        type: 'success'
      })
      // 更新列表
      this.getList()
    },
    handleDeleteUser({ $index, row }) {
      this.$confirm('Confirm to remove the Staff?', 'Warning', {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      })
        .then(async() => {
          await baseAPI.post('user/user/delete', { id: row.id })
          this.userList.splice($index, 1)
          this.$message({
            type: 'success',
            message: 'Delete succed!'
          })
        })
        .catch(err => { console.error(err) })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
